<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<ul>
	<!-- <li>苹果</li>
	<li>香蕉</li> -->
	
	<!-- //循环 x in xs {{x}} -->
	<li v-for="item in items">{{item}}</li>
	

</ul>

<!-- <input v-model="items"/> -->
<input v-model="i"/>

<button @click="add()">添加</button>
<button @click="del()">删除</button>

</div>
<title></title>
</head>
<body>
<script>
new Vue({
	el:"#app",//#-查找id=app的元素
	data:{
		i:"",
		items:["苹果","香蕉","梨子"]
		
	},
	methods:{
		add:function(){
			//alert(this.i)
			this.items.push(this.i)//添加元素
			this.i=""
		},
		del:function(){
			//this.items.pop()//删除pop元素
			
			//根据输入框内容删除元素
			// this.items.slice(0,1)//删除下标为0的第一个元素？
			// this.items.slice(2,2)//删除下标为的第二个元素
			//for(x in this.items){
				var index=this.items.indexOf(this.i);
				if(index==-1){
					alert("没有这个元素")
				}else{
					this.items.splice(index,1)
				}
				this.i=""//输入框清0
				
			// 	if(this.i==items[x]){
			// 		index=x;
			// 	}
			// }
			
			//this.items.slice(index,1)
			
		}
	}
	
})
</script>
</body>
</html>
